<template>
  <div class="header" :style="styleObj">
    <!-- title -->
    <!-- <span class="title">猪猪会所<i class="iconfont icon--xiaozhu"></i></span> -->
    <span @click="turnToHome" class="title">猪猪会所<i class="iconfont icon--xiaozhu"></i></span>
    <!-- <span class="search"><input type="text" v-model="keyWord" placeholder="  搜索文章"></span> -->
    <!-- <i class="iconfont icon-sousuo " id="mirror"></i> -->
    <!-- 搜索框 -->
    <span class="a">
    <input type="text" 
    id="ipt"
    class="b" placeholder="搜文章" 
    v-model="keyWord" 
    @keydown="turnTosearch"
    >
        <a href="" class="c" >
        <i class="iconfont icon-sousuo"></i>
        </a>
    </span>
    <!-- 设置 -->
    <span class="set" >
        <el-dropdown trigger="click">
            <span class="el-dropdown-link">
                <i class="iconfont icon-shezhi setbox" ></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="picBox" placement="bottom">
                <el-dropdown-item  @click.native="sendPic(p)" v-for="(p,index) in pic" :key="index" class="pic1box">
                    <!-- <img :src="'http://1.12.58.122:3007/'+p" class="pic"> -->
                    <span class="pic1">
                        <img :src="'http://1.12.58.122:3007/'+p" class="pic">
                    </span>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </span>
    <!-- 管理员登录 -->
    <span @click="turnToadmin" class="login"><i class="iconfont icon-denglu-copy icon1" ></i></span>
    <!-- 友链 -->
    <!-- <router-link to="/mylink" class="friend"><i class="iconfont icon-feiji icon1"></i></router-link> -->
    <span  @click="turnToLink" class="friend"><i class="iconfont icon-feiji icon1" ></i></span>
    <!-- 相册 -->
    <span  @click="turnToPic" class="pic"><i class="iconfont icon-xiangce " ></i></span>
    <!-- 主页 -->
    <span  @click="turnToHome" class="home"><i class="iconfont icon-home icon1" ></i></span>
    <div class="changeBackGround" v-show="value">
        
    </div>
  </div>
</template>

<script>
import { debounce } from '@/assets/js/debounce'
export default {
    name:'myHeader',
    data(){
        return {
            keyWord:'',
            styleObj:{
                backgroundColor:'rgba(255,255,255,0.05)',
                color:'rgb(190, 139, 156)'
            },
            pic:[
                '3.jpg',
                '5.jpg',
                '10.jpg',
                '11.jpg'
            ],
            value:false
        }
    },
    mounted(){
        window.addEventListener('scroll',this.handlerScorll) // 监听页面滚动
    },
    methods:{
        handlerScorll(){
            // 页面移动 导航栏改变颜色
            let scrollTop = window.pageYOffset 
            // 改变样式
            if(scrollTop > (1)){
                this.styleObj.backgroundColor = 'rgba(11,15,52,0.85)'
                this.styleObj.color='rgb(255,255,255)'
            }
            // 默认样式
            if(scrollTop <  (1)){
                this.styleObj.backgroundColor = 'rgba(255,255,255,0.05)',
                this.styleObj.color='rgb(190, 139, 156)'
            }
        },
        turnToadmin(){
            if(!sessionStorage.token)
            this.$router.push({
                path:'/login'
            })
            if(sessionStorage.token){
                this.$router.push({
                path:'/admin'
            })
            }
        },
        turnToLink(){
            this.$router.push({
                path:'/myLink'
            })
        },
        turnToHome(){
            this.$router.push({
                path:'/home'
            })
        },
        turnToPic(){
            this.$router.push({
                path:'/pic'
            })
        },
        fn(){
            let res = this.$store.dispatch('searchKW',this.keyWord)
            res.then(()=>{
                this.$router.push({
                    path:'/keysearch',
                    query:{
                        keyWord:this.keyWord
                    }
                })
            })    
        },
        changeValue(){
            this.value = true
        },
        turnTosearch:debounce("fn",1200),
        sendPic(p){
            this.$bus.$emit('changePic', p);
        }
    }
}
</script>

<style scoped>
    .header {
        position: fixed;
        line-height: 64px;
        height: 8%;
        width: 100%;
        border-bottom:0 solid rgb(185, 181, 181);
        z-index: 999999;
    }
    .title {
        float: left;
        margin-left: 50px;
        font-size: 30px;
        color:pink;
        height: 100%;
        text-decoration: none;
        cursor: pointer;
        font-family: "NLXJ-BODY";
    }
    .iconfont {
        margin-left: 8px;
        font-size: 25px;
        color:rgb(190, 139, 156)
    }
    .set {
        float: right;
        margin-right: 50px;
    }
    .login {
        float: right;
        margin-right: 30px;
        cursor: pointer;
    }
    a {
        text-decoration: none;
        font-size: 15px;
        color:white;
    }
    .home {
        float: right;
        margin-right: 30px;
        cursor: pointer;
    }
    .pic {
        float: right;
        margin-right: 30px;
        cursor: pointer;
        font-size: 16px;
    }
    .friend {
        float: right;
        margin-right: 30px;
        cursor: pointer;
    }
    input {
        background-color: transparent;
        height: 30px;
        width: 250px;
        border: 1px solid white;
        border-radius: 12px;
        color:white;
        font-size:14px;
        outline-style: none;
    }
    .icon1 {
        font-size: 20px;
    }
    .a {
        float: left;
        position: absolute;
        left:50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background-color: transparent;
        border-radius: 30px;
        padding:10px;
        line-height: 30px;
    }
    .a:hover {
        border: 1px solid white;
    }
    .a:hover .b {
        width: 200px;
        padding: 0 6px;
        background-color: transparent;
    }
    .a:hover .c {
        background-color: transparent;
        
    }
    .b {
        margin-top:-2px;
        border:none;
        background: none;
        /* 取消选中搜索框时的外边框 */
        outline: none;
        width: 0;
        padding: 0;
        transition: .4s;
        line-height: 40px;
        font-size: 20px;
        color: wheat;
    }
    .c {
        color:#2f3640;
        float: right;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -5px;
    }
.setbox {
    /* animation: turn 2s linear infinite  */
    cursor: pointer;
} 
     @keyframes turn {
        0% {
            opacity: 1;
        }
        50% {
            transform: rotate(180deg);
            opacity: 0.7;
        }
        100%{
            transform: rotate(270deg);
            opacity: 0.2;
        }
    }
a {
    text-decoration: none;
}
.picBox {
    background-color: transparent;
    height: 350px;
    width: 500px;
}
.pic1 {
    position: relative;
    display: block;
    width: 100%;
    height: 70px;
    margin-top: 15px;
    border-radius: 35px;
}
.picBox:hover .pic1box {
    background-color: transparent;
}
.pic1 img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 70px;
    border-radius: 35px;
    object-fit: cover;
}
</style>